<template>
	<div class="audio-player">
		<div @click="togglePlay" class="image-box">
			<img src="./static/Pause.png" class="image" v-if="isPlaying" />
			<img src="./static/Play.png" class="image" v-else />
		</div>
		<div class="progress-bar" ref="progressBar" @click="seek" @mousedown="startDrag" @mousemove="drag" @mouseup="endDrag"
			@mouseleave="endDrag">
			<div class="progress-filled" :style="{ width: progress + '%' }"></div>
			<div class="progress-dot" :style="{ left: progress + '%' }"></div>
		</div>
		<div class="time-display">
			<span>{{ formattedCurrentTime }}</span> /
			<span>{{ formattedTotalTime }}</span>
		</div>
		<audio ref="audioRef" @timeupdate="updateProgress" @loadedmetadata="updateTotalTime" :src="audioSrc"
			@ended="reset"></audio>
	</div>
</template>

<script setup>
	import {
		ref,
		watch,
		computed,
		onMounted,
		onUnmounted,
		defineProps,
		defineEmits
	} from 'vue';
	const props = defineProps({
		audioSrc: {
			type: String,
			default: "",
		},
	});
	const audioRef = ref(null);
	const progressBar = ref(null);
	const isPlaying = ref(false);
	const progress = ref(0);
	const formattedCurrentTime = ref('00:00');
	// 格式化时间  
	watch(progress, (newVal) => {
		if (audioRef.value) {
			const currentTime = audioRef.value.currentTime;
			const minutes = Math.floor(currentTime / 60);
			const seconds = Math.floor(currentTime % 60);
			formattedCurrentTime.value =
				`${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
		}
	})
	const formattedTotalTime = ref('');

	// 更新总时间  
	const updateTotalTime = () => {
		const totalDuration = audioRef.value.duration;
		formattedTotalTime.value =
			`${Math.floor(totalDuration / 60).toString().padStart(2, '0')}:${Math.floor(totalDuration % 60).toString().padStart(2, '0')}`;
	};

	let isDragging = false;
	// 获取进度条宽度（需要计算或设置为一个已知值）  
	
	const progressBarWidth = ref(0);
	// 更新进度条和圆点的位置  
	const updateProgress = () => {
		const currentTime = audioRef.value.currentTime;
		const duration = audioRef.value.duration;
		progress.value = Math.floor((currentTime / duration) * 100);
	};


	// 拖动逻辑  
	const startDrag = (e) => {
		isDragging = true;
	};

	const drag = (e) => {
		if (!isDragging) return;
		seekTo(progress.value / progressBarWidth.value * audioRef.value.duration);
	};

	const endDrag = () => {
		isDragging = false;
	};

	// 跳转到指定位置  
	const seekTo = (time) => {
		audioRef.value.currentTime = time;
	};

	// 监听点击事件以跳转播放位置  
	const seek = (e) => {
		const rect = e.target.getBoundingClientRect();
		const clickPosition = e.clientX - rect.left;
		const time = clickPosition / progressBarWidth.value * audioRef.value.duration;
		seekTo(time);
	};


	// 播放/暂停  
	const togglePlay = () => {
		if (audioRef.value.paused) {
			audioRef.value.play();
			isPlaying.value = true;
		} else {
			audioRef.value.pause();
			isPlaying.value = false;
		}
	};

	// 重置进度和播放状态  
	const reset = () => {
		progress.value = 0;
		isPlaying.value = false;
		audioRef.value.currentTime = 0;
	};

	// 组件挂载后  
	onMounted(() => {
		progressBarWidth.value = progressBar.value.offsetWidth
		// 如果需要自动播放，可以在这里添加逻辑  
	});

	// 组件卸载前  
	onUnmounted(() => {
		// 清理可能存在的定时器或事件监听器等  
	});
</script>

<style scoped>
	.audio-player {
		display: flex;
		align-items: center;
		/* 容器背景色，可按需修改 */
		padding: 10px;
		border-radius: 5px;
	}

	.image-box {
		width: 18px;
		height: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image {
		width: 18px;
		height: 18px;
	}

	.play-pause-btn {
		font-size: 20px;
		color: #0CB76C;
		/* 播放/暂停按钮颜色 */
		margin-right: 10px;
		cursor: pointer;
	}

	.progress-bar {
		width: 200px;
		position: relative;
		flex: 1;
		height: 10px;
		background-color: #F5F5F5;
		/* 进度条背景色 */
		border-radius: 5px;
		/* overflow: hidden; */
		margin: 0 10px;
	}

	.progress-filled {
		height: 100%;
		border-radius: 5px;
		background-color: #0CB76C;
	}

	.progress-dot {
		position: absolute;
		top: -2.5px;
		margin-left: -5px;
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: #0CB76C;
		pointer-events: none;
		z-index: 1000;
		/* 防止点击圆点时触发进度条的click事件 */
		/* transition: left 0.2s ease; */
		/* 添加过渡效果使圆点移动更平滑 */
	}

	.time-display {
		color: #8E8E8E;
		font-size: 12px;
		/* 时间显示颜色 */
	}
</style>